<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="消息中心" ref="navbar"></fa-navbar>
		<view class="content">
			<view class="tabs">
				<u-tabs :list="list1" @click="click" :activeStyle="{color:'#000000','font-weight':'600','font-size':'30rpx'}" :inactiveStyle="{color:'#666666','font-size':'28rpx'}"></u-tabs>
			</view>
			<view class="msglist">
				<view class="items" v-for="(item,index) in messageList" :key="index">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.content}}</view>
					<view class="sj">
						<u-icon name="clock" color="#999999"></u-icon>
						<text class="u-m-l-10">{{item.createtime_text}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-30" v-if="messageList.length">
			<u-loadmore bg-color="#f4f6f8" :status="status" />
		</view>
		<!-- 为空 -->
		<view class="u-m-t-60 u-p-t-60" v-if="is_empty">
			<u-empty text="暂无内容展示" mode="list"></u-empty>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
			:custom-style="{ backgroundColor: lightColor }"></u-back-top>
		<!-- 底部导航 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '系统通知',
				}],
				page: 1,
				has_more: true,
				is_empty: false,
				messageList:[],
			};
		},
		onLoad() {
			this.getMessage()
			this.markRead();
		},


		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				this.getMessage();
			}
		},
		methods:{
			click(){},	
			getMessage(){
				this.$api.getMessageList({params:{
					page:this.page
				}}).then((res)=>{
					if(res.code){
						if (this.page === 1) {
							this.messageList = [];
						}
						let messageList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.messageList = [...this.messageList, ...messageList];
						this.is_empty = !this.messageList.length;
					}
				})
			},
			markRead(){
				this.$api.markReadMessage().then((res)=>{
					if(res.code){
						
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 188rpx 24rpx 0 24rpx;
		.u-tabs{
			/deep/ &__wrapper__nav__line{
				height: 6rpx !important;
				background-color: #0052D9 !important;
			}
		}
		.msglist{
			margin-top: 32rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;
			.items{
				.sj{
					margin-top: 17rpx;
					display: flex;
					align-items:center;
					color: #999999;
					font-size: 24rpx;
				}
				.title{
					font-size: 30rpx;
					color: #333333;
					font-weight: 500;
				}
				.desc{
					margin-top: 12rpx;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
	}
</style>